<template>
  <div id="scroll-board">
    <!-- <dv-scroll-board :config="config" /> -->
    <!-- <dv-charts :option="config"></dv-charts> -->
    <div class="scroll-header">磁盘读写 %</div>
    <dv-capsule-chart :config="config" style="width: 98%; height: 75%" />
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: "ScrollBoard",
  mounted() {
    const { queryData, queryData2, queryData3 } = this;
    queryData3();
    setInterval(queryData3, 120000);
  },
  methods: {
    queryData() {
      this.axios({
        url: "/alarms_recent/",
        method: "GET",
        responseType: "json",
      }).then((res) => {
        var jsondata = JSON.parse(JSON.stringify(res.data["recent_alarms"]));
        jsondata = _.reverse(_.sortBy(jsondata, "source_time"));
        console.log("recent_alarms:", jsondata);
        let _data = [];
        _.each(jsondata, function (item) {
          _data.push([item["source_time"], item["message"]]);
        });
        console.log("recent_alarms 2:", _data);
        if (_data.length == 0) {
          _data = [
            ["2019-07-01 19:25:00", "......"],
            ["2019-07-02 17:25:00", "......"],
          ];
        }
        this.config = {
          header: ["时间", "警告事件"],
          data: _data,
          index: true,
          columnWidth: [50, 170, 300],
          align: ["center"],
          rowNum: 7,
          headerBGC: "#1981f6",
          headerHeight: 45,
          oddRowBGC: "rgba(0, 44, 81, 0.8)",
          evenRowBGC: "rgba(10, 29, 50, 0.8)",
        };
      });
    },
    queryData2() {
      this.config = {
        title: {
          text: "内存使用率%",
          style: {
            fill: "#fff",
          },
        },
        series: [
          {
            type: "gauge",
            data: [{ name: "itemA", value: this.randomExtend(55, 70) }],
            center: ["50%", "75%"],
            axisLabel: {
              formatter: "{value}%",
              style: {
                fill: "#fff",
              },
            },
            axisTick: {
              style: {
                stroke: "#fff",
              },
            },
            animationCurve: "easeInOutBack",
          },
        ],
      };
    },
    // IO 胶囊柱图
    queryData3() {
      this.axios({
        url: "/cpu_perfs/",
        method: "GET",
        responseType: "json",
      }).then((res) => {
        var jsondata = JSON.parse(JSON.stringify(res.data));
        // console.log("==> cards,", jsondata);
        let { cpu_perfs, mem_perfs, io_perfs } = jsondata;
        cpu_perfs = _.reverse(_.sortBy(cpu_perfs, "cpu_usage"));
        let io_data = [];
        _.each(cpu_perfs, (cpu, i) => {
          // let mem = _.find(mem_perfs, function (o) {
          //   return o["ip"] == cpu["ip"];
          // }) || { mem_usage: undefined };
          let io = _.find(io_perfs, function (o) {
            return o["ip"] == cpu["ip"];
          }) || { io_usage: undefined };
          io_data.push({
            name: cpu['ip'],
            value: io['io_usage'] || this.randomExtend(10,40)
          });
        });
        let total_slots = 5;
        let add_slots = 5 - io_data.length;
        for (let i=0; i<add_slots; i++) {
          io_data.push({
            name: '服务器'+(i+1),
            value: this.randomExtend(40,50)
          })
        }
        io_data = _.reverse(_.sortBy(io_data, "io_usage"));
        console.log('scrollBoard, ',io_data);
        this.config = {
          data: io_data,
          unit: "IO %",
          showValue: true
        };
      });
    },
    randomExtend(minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10);
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      }
    },
  },
  data() {
    return {
      config: {
        title: {
          text: "内存使用率%",
          style: {
            fill: "#fff",
          },
        },
        series: [
          {
            type: "gauge",
            data: [{ name: "itemA", value: 55 }],
            center: ["50%", "55%"],
            axisLabel: {
              formatter: "{value}%",
              style: {
                fill: "#fff",
              },
            },
            axisTick: {
              style: {
                stroke: "#fff",
              },
            },
            animationCurve: "easeInOutBack",
          },
        ],
      },
    };
  },
};
</script>

<style lang="less">
#scroll-board {
  width: 50%;
  box-sizing: border-box;
  margin-left: 20px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, 0.5);
}
.scroll-header {
  font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    justify-content: center;
}

</style>
